import { Button, Empty, Space, Radio, Checkbox, InputNumber, Table } from 'antd';
import { useState, useEffect, useContext } from 'react'
import ZhpgContext from '../ZhpgContext';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import LittleTitle from '../../../../../common/LittleTitle';
import RadiusComponent from '../../../../../common/RadiusComponent';
import { resourcePath } from '../../../../../../utils/resource';
import '../Yxfx/index.less'
import { SearchOutlined } from '@ant-design/icons';
import CztApi from '../../../../../../utils/apis/CztApi';
import JzzyApi from '../../../../../../utils/apis/JzzyApi';
import { fromCircle } from 'ol/geom/Polygon';
import { drawCircle, wktToGeom } from '../../../../../../utils/helper/mapHelper';
import rangeDisplayIcon from '../../Jcyj/rangeDisplayIcon';

export default function Yxfx(props) {
    // console.log(props.onyxfxData.geom)
    //const { zhData } = useContext(ZhpgContext);
    const map = useBusinessMap();

    const [radius, setRadius] = useState();
    const { zhData } = useContext(ZhpgContext);
    const [loading, setLoading] = useState();

    //console.log('查看props传递的数据',props);
    const [yxList, setYxList] = useState();
    const [onCompleted] = useState(() => {
        return props.onCompleted;
    })
    const [type, setType] = useState('czt')

    // console.log('yxList', yxList)

    useEffect(() => {
        if (map && radius) {
            const center = wktToGeom(zhData.geom)?.getCoordinates();
            const circle = drawCircle(map, center, radius);
            setLoading(true)
            // const data = yxList ? yxList.map(item => ({name:item?.name})) : [];
            // rangeDisplayIcon(data, circle, map, type)
            CztApi.listByPolygon(fromCircle(circle)).then(resp => {
                setYxList(resp.data);
                onCompleted?.({
                    radius: radius,
                    datas: resp.data
                })
            }).finally(e => {
                setLoading(false)
            })
            // return ()=>{
            //     const allLayers=map.getLayers().getArray();
            //     [...allLayers].forEach(l=>{
            //         if(l?.get("layerName")=== 'rangeDisplayIcon')
            //         map.removeLayer(l);
            //     })
            // }
        }
    }, [map, radius, zhData, onCompleted, type])

    useEffect(() => {
        if (map && radius) {
            const center = wktToGeom(zhData.geom)?.getCoordinates();
            const circle = drawCircle(map, center, radius);
            const data = yxList ? yxList.map(item => ({ name: item?.name })) : [];
            console.log("@2")
            rangeDisplayIcon(data, circle, map, type,'nowkt')
            return ()=>{
                const allLayers=map.getLayers().getArray();
                [...allLayers].forEach(l=>{
                    if(l?.get("layerName")=== 'rangeDisplayIcon')
                    map.removeLayer(l);
                })
            }
        }

    },[map,radius,type,yxList,zhData])

    const handleButtonClick = (record) => {
        props.onDetail({
            record,
            radius: radius,
            xqzt: 1
        })
    }


    if (!zhData) {
        return <Empty description="请先选择灾害数据" image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
    }

    return <div>
        <Space direction='vertical' style={{ width: '100%' }}>
            <Space style={{
                marginTop: 12
            }}>
                <Radio.Group size='small' value={radius} onChange={e => {
                    setRadius(e.target.value);
                }} buttonStyle="solid">
                    <Radio.Button value={5}>5km</Radio.Button>
                    <Radio.Button value={10}>10km</Radio.Button>
                    <Radio.Button value={15}>15km</Radio.Button>
                    <Radio.Button value={20}>20km</Radio.Button>
                </Radio.Group>

                <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                    width: 120
                }} onChange={value => {
                    setRadius(value);
                }} />
            </Space>

            <LittleTitle fontSize={16} icon={false}>影响类型</LittleTitle>
            <div className='layout-h' style={{
                flex: 'flex',
                flexWrap: "wrap",
                paddingTop: 12
            }}>
                <div className='layout-h center' style={{
                    background: `url(${resourcePath.blockTitleBg}) no-repeat`,
                    width: '48%',
                    height: "60px",
                    fontSize: "18px",
                    margin: "0 12px 12px 0",
                }} >
                    <span style={{
                        paddingLeft: 12
                    }}>人口</span>
                    <span style={{
                        marginLeft: "68%",
                        fontSize: '18px'

                    }}>0</span>
                </div>
                <div className='layout-h center' style={{
                    background: `url(${resourcePath.blockTitleBg}) no-repeat`,
                    width: '48%',
                    height: "60px",
                    fontSize: "18px",
                    // margin: "12px 12px 12px 0",
                }} >
                    <span style={{
                        paddingLeft: 12
                    }}>经济</span>
                    <span style={{
                        marginLeft: "68%",
                        fontSize: '18px'

                    }}>0</span>
                </div>
                <div className='layout-h center' style={{
                    background: `url(${resourcePath.blockTitleBg}) no-repeat`,
                    width: '48%',
                    height: "60px",
                    fontSize: "18px",
                    margin: "0 12px 12px 0",
                }} >
                    <span style={{
                        paddingLeft: 12
                    }}>房屋</span>
                    <span style={{
                        marginLeft: "68%",
                        fontSize: '18px'

                    }}>0</span>
                </div>
                <div className='layout-h center' style={{
                    background: `url(${resourcePath.blockTitleBg}) no-repeat`,
                    width: '48%',
                    height: "60px",
                    fontSize: "18px",
                }} >
                    <span style={{
                        paddingLeft: 12
                    }}>农田</span>
                    <span style={{
                        marginLeft: "68%",
                        fontSize: '18px'

                    }}>0</span>
                </div>
            </div>
            <LittleTitle fontSize={16} icon={false}>承灾体</LittleTitle>

            <div className='fill' style={{
                paddingTop: 12
            }}>

                <Table loading={loading} size={"small"} bordered columns={[{
                    title: '影响机构',
                    dataIndex: 'name'
                }, {
                    title: '影响数量',
                    dataIndex: 'count',
                    align: "right",
                    render: (text) => {
                        return text + '处'
                    }
                }, {
                    render: (text, record) => {
                        return <Button type="link" size="small" style={{
                            padding: 0
                        }} onClick={() => handleButtonClick(record)}>详情</Button>
                    }
                }]}
                    showHeader={false}
                    dataSource={yxList} />
            </div>


        </Space>

    </div>
}